<template>
  <div class="sign-up-items">
    <el-table
      v-loading="loading"
      element-loading-text="数据载入中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255,255,255, 0.4)"
      :data="items">
      <el-table-column
        label="出行日期">
        <template slot-scope="scope">
          {{scope.row.start_date}}
        </template>
      </el-table-column>
      <el-table-column
        label="活动名称">
        <template slot-scope="scope">
          {{scope.row.activity.title}}
        </template>
      </el-table-column>
      <el-table-column
        label="人数上限">
        <template slot-scope="scope">
          {{scope.row.sign_up_limit}}
        </template>
      </el-table-column>
      <el-table-column
        label="已报名人数">
        <template slot-scope="scope">
          {{scope.row.sign_up_num}}
        </template>
      </el-table-column>
      <el-table-column
        label="剩余名额">
        <template slot-scope="scope">
          {{Number(scope.row.sign_up_limit) - Number(scope.row.sign_up_num)}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="little"
            v-if="auth('activity.sign-up.detail')"
            @click="jump({name: 'activity.sign-up.detail', params: {group_stage_id: scope.row.id}})"
            type="primary">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages">
      <el-pagination
        background
        @size-change="()=>{}"
        @current-change="currentPage"
        :current-page.sync="page"
        :page-size="size"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    status: {
      type: Number
    }
  },
  data () {
    return {
      loading: false,
      page: 1,
      size: 20,
      total: 0,
      items: []
    }
  },
  watch: {
    $route (route) {
      if (this.$route.params.page) {
        this.page = Number(this.$route.params.page)
      }
      this.getItems()
    }
  },
  methods: {

    /**
     * 页码改变事件
     */
    currentPage (page) {
      this.jump({
        name: 'activity.sign-up.items.' + this.status,
        params: {
          page: page
        }
      })
    },
    /**
     * @purpose 获取数据
     */
    getItems () {
      this.loading = true
      this
        .$api
        .activity
        .signUpRecord(this.status, this.page, this.size)
        .then(r => {
          this.loading = false
          this.items = r.list
          this.total = r.total
        })
        .catch(() => {
          this.loading = false
        })
    }
  },
  created () {
    if (this.$route.params.page) {
      this.page = Number(this.$route.params.page)
    }
    this.getItems()
  }
}
</script>
<style scoped></style>
